<template>
  <view class="container"> 
    <view class="scroll-science">
       <!-- 分类导航 -->
      <scroll-view scroll-x class="nav-scroll">
        <view class="nav-item" v-for="(item, index) in scienceTypeList" :key="index" @click="changeNav(index)">
          <text :class="['nav-text', scienceDTO.type === index ? 'active' : '']">{{item.label}}</text>
        </view>
        <view class="aside-scroll">
          <view class="aside-item" v-for="(item, index) in navList" :key="index" @click="tabtap(item)">
              {{ item.name }}
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 文章卡片列表 -->
    <view class="card-list">
      <uni-card v-for="(item, index) in articleList" :key="index" :title="item.title" :extra="item.createTime" :is-shadow="true" :border="false">
        <view class="content-container">
          <text class="content-text">{{item.content}}</text>
          <view class="content-img-box">
            <img :src="item.img" class="content-img" />
          </view>
        </view>
        <view class="user-img-box">
          <img :src="item.publisher.avatar" class="user-img" />
          <text>{{item.publisher.nickname}} {{templateDoctorLevel(item.publisher.userRank)}}</text>
        </view>
        <template v-slot:actions>
          <view class="card-actions">
            <view class="card-actions-item" @click="like(item.scId)">
              <uni-icons type="hand-up" size="18" color="#999"></uni-icons>
              <text>{{item.likes}}</text>
            </view>
            <view class="card-actions-item" @click="comment(index)">
              <uni-icons type="chat" size="18" color="#999"></uni-icons>
              <text>{{item.comments}}</text>
            </view>
            <view class="card-actions-item" @click="favorite(item,index)">
              <uni-icons :type="item.favorited ? 'star-filled' : 'star'" size="18" :color="item.favorited ? '#ff0000' : '#999'"/>
              <text>{{item.favorites}}</text>
            </view>
          </view>
        </template>
      </uni-card>
    </view>
  </view>
</template>

<script>
import { 
  listSciences,
  likeScience,
  favoriteScience 
} from '@/api/science/index.js'
import { getDictOptions , selectDictLabel } from '@/api/dict/index.js'
import { listTypeItems } from '@/api/scienceTypeItem/index.js'
import uniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'
import uniCard from '@/uni_modules/uni-card/components/uni-card/uni-card.vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

export default {
  components: {
    uniSearchBar,
    uniCard,
    uniIcons
  },
  data() {
    return {
      scienceDTO: {
        type: 0, // 分类
        typeItem: 1, // 分类项
      },
      favorites: 0,
      typeItem: 0,
      doctorLevelList: [],
      navList: [],
      articleList: [],
      scienceTypeList: []
    }
  },
  async onLoad() {
    this.getArticleList();
    this.getDoctorLevel();
    this.getScienceType();
    this.getScienceTypeItem();
  },
  methods: {
    //获取文章列表
    getArticleList() {
      // 调用接口获取文章列表数据
      listSciences(this.scienceDTO).then(res => {
        //转化时间戳
        res.data.forEach(item => {
          item.createTime = new Date(item.createTime).toLocaleString();
        })
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].favorited = false;
        }
        this.articleList = res.data;
      })
    },
    //获取医生级别
    getDoctorLevel() {
      getDictOptions('user_rank').then(res => {
        this.doctorLevelList = res.data;
      })
    },
    //翻译医生级别
    templateDoctorLevel(level) {
      return selectDictLabel(this.doctorLevelList, level);
    },

    //获取科普类别
    getScienceType() {
      getDictOptions('science_type').then(res => {
        this.scienceTypeList = res.data;
      })	
    },

    //获取科普类别项
    getScienceTypeItem() {
      listTypeItems(this.typeItem).then(res => {
        this.navList = res.data;
      })
    },
    //切换分类
    changeNav(index) {
      this.scienceDTO.type = index;
      this.scienceDTO.typeItem = 1;
      this.typeItem = index;
      this.getScienceTypeItem();
      this.getArticleList();
    },
    //切换分类项
    tabtap(item) {
      this.scienceDTO.typeItem = item.typeItemId;
      this.getArticleList();
    },
    //点赞
    like(scId) {
      likeScience(scId);
	  this.getArticleList();
    },
    //收藏
    favorite(item,index) {
      this.articleList[index].favorited = !this.articleList[index].favorited;
      this.articleList[index].favorites = this.articleList[index].favorited? this.articleList[index].favorites + 1 : this.articleList[index].favorites - 1;
      favoriteScience(item.scId,this.articleList[index].favorited);
    },
    //评论
    comment(index) {
		uni.setStorageSync('science',this.articleList[index])
		uni.navigateTo({
			url: '/pages/comment/index'
		})
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #f8f8f8;
  height: 100vh;
}

.content-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.content-text {
  flex: 1;
  width: 190rpx;
  height: 66px;
  overflow: hidden; /* 隐藏超出部分的内容 */
  //将没被显示出的文本用省略号代替
  // white-space: nowrap;
}

.content-img-box {
  width: 110px;
  height: 80px;
}

.content-img {
  width: 110px;
  height: 150rpx;
  border-radius: 8px;
}

.user-img-box{
  display: flex;
  align-items: center;
  gap: 10px;
  // padding: 8px 0;
}

.user-img{
  height: 30px;
  width: 30px;
  border-radius: 50%;
}

.aside-item {
  width: 70px;
  border-radius: 12px;
  font-size: 12px;
  text-align: center;
  line-height: 24px;
  height: 24px;
  margin-left: 10px;
  margin-top: 18px;
  background-color: #1890ff;
  color: white;
}

.aside-scroll {
  background-color: white;
  width: 100%;
  height: 55px;
  padding: 1px;
  display: flex;
  flex-direction: row;
  // 隐藏滚动条
  overflow-y: hidden;
  //隐藏超出部分的容器
  overflow-x: hidden;
}

.scroll-science {
  width: 100%;
  height: 40px;
  background-color: white;
}

.nav-scroll {
  white-space: nowrap;
  margin: 20rpx 0;
}

.nav-item {
  display: inline-block;
  padding: 0 20rpx;
  font-size: large;
}

.nav-text {
  font-size: 28rpx;
  color: #666;
  padding-bottom: 10rpx;
}

.nav-text.active {
  color: #1890ff;
  border-bottom: 4rpx solid #1890ff;
}

.card-list {
  margin-top: 120rpx;
}

.content-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.card-actions {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.card-actions-item {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
  color: #999;
  font-size: 24rpx;
}

.card-actions-item text {
  margin-left: 10rpx;
}
</style>